<template>
  <div class="login-bg">
    <div class="login-container">
      <div class="login-left">
        <div class="login-left-content">
          <h2>Welcome to</h2>
          <h1>招标文件智析系统</h1>
          <p>你的强有力招标文件分析工具</p>
        </div>
      </div>
      <div class="login-right">
        <h2>LOGIN</h2>
        <div v-if="deleteSuccess" class="success-tip">{{ deleteSuccessMsg }}</div>
        <form @submit.prevent="handleLogin">
          <div v-if="loginSuccess" class="success-tip">{{ successMsg }}</div>
          <div v-if="showLoginTip" style="color: #000; background: none; border: none; font-size: 0.95rem; margin-bottom: 8px; text-align: center;">
            {{ loginTipMsg }}
          </div>
          <input
            type="text"
            v-model="phone"
            placeholder="请输入手机号"
            @input="onPhoneInput"
            @blur="phoneTouched = true"
          />
          <div v-if="phoneTouched && phoneInvalid" class="error-tip account-error">账号不正确</div>
          <div class="password-box">
            <input
              :type="showPassword ? 'text' : 'password'"
              v-model="password"
              placeholder="请输入密码"
            />
            <span class="toggle" @click="showPassword = !showPassword">
              <img :src="showPassword ? eyeShowIcon : eyeHideIcon" alt="toggle password" class="eye-icon" />
            </span>
          </div>
          <div
            v-if="passwordTouched && passwordInvalid"
            style="color: #000; font-size: 0.85rem; margin-bottom: 8px;"
          >
            密码至少6位，且必须包含字母和数字
          </div>
          <div class="agreement">
            登录即代表同意
            <a href="#">《用户协议》</a>
            和
            <a href="#">《隐私协议》</a>
          </div>
          <button type="submit">登录</button>
          <div v-if="accountNotExist" class="error-tip">此账号不存在，请先去注册</div>
          <div v-if="loginError" class="error-tip">密码错误，请重新输入正确的密码</div>
        </form>
        <div class="login-footer">
          <router-link to="/register">一键注册！</router-link>
          <span> | </span>
          <router-link to="/forgot-password">忘记密码？</router-link>
          <span> | </span>
          <a href="#" @click.prevent="showDeleteAccountDialog">注销账号</a>
        </div>
        
        <!-- 注销账号对话框 -->
        <div v-if="showDeleteDialog" class="delete-dialog-overlay" @click="hideDeleteDialog">
          <div class="delete-dialog" @click.stop>
            <h3>注销账号</h3>
            <p>请输入要注销的手机号和密码，注销后账号将被永久删除。</p>
            <input 
              type="text" 
              v-model="deletePhone" 
              placeholder="请输入手机号"
              @input="deletePhoneTouched = true"
            />
            <input 
              type="password" 
              v-model="deletePassword" 
              placeholder="请输入密码"
              @input="deletePasswordTouched = true"
            />
            <div class="dialog-buttons">
              <button class="cancel-btn" @click="hideDeleteDialog">取消</button>
              <button class="confirm-btn" @click="confirmDeleteAccount" :disabled="!canDeleteAccount">
                确认注销
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import eyeShowIcon from '@/assets/icons/眼睛_显示.svg';
import eyeHideIcon from '@/assets/icons/眼睛_隐藏.svg';

export default {
  name: "LoginPage",
  data() {
    return {
      phone: "",
      password: "",
      showPassword: false,
      eyeShowIcon,
      eyeHideIcon,
      successMsg: "",
      loginSuccess: false,
      loginError: false,
      accountNotExist: false,
      phoneTouched: false,
      passwordTouched: false,
      showLoginTip: false,
      loginTipMsg: '',
      loginTipTimer: null,
      showDeleteDialog: false,
      deletePhone: '',
      deletePhoneTouched: false,
      deletePassword: '',
      deletePasswordTouched: false,
      deleteSuccess: false,
      deleteSuccessMsg: '',
    };
  },
  inject: ['auth'],
  computed: {
    phoneInvalid() {
      const phoneReg = /^1[3-9]\d{9}$/;
      return this.phone && !phoneReg.test(this.phone);
    },
    passwordInvalid() {
      const pwdReg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;
      return !pwdReg.test(this.password);
    },
    deletePhoneInvalid() {
      const phoneReg = /^1[3-9]\d{9}$/;
      return this.deletePhoneTouched && !phoneReg.test(this.deletePhone);
    },
    isDeletePasswordCorrect() {
      if (!this.deletePasswordTouched || !this.deletePhone) return false;
      const userPasswords = JSON.parse(localStorage.getItem('userPasswords') || '{}');
      const registeredPhones = JSON.parse(localStorage.getItem('registeredPhones') || '[]');
      return registeredPhones.includes(this.deletePhone) && userPasswords[this.deletePhone] === this.deletePassword;
    },
    canDeleteAccount() {
      return this.deletePhone && this.deletePassword && !this.deletePhoneInvalid && this.isDeletePasswordCorrect;
    }
  },
  methods: {
    onPhoneInput() {
      this.accountNotExist = false;
      this.loginError = false;
      this.phoneTouched = true;
    },
    showLoginTipMsg(msg) {
      if (this.loginTipTimer) clearTimeout(this.loginTipTimer);
      this.loginTipMsg = msg;
      this.showLoginTip = true;
      this.loginTipTimer = setTimeout(() => {
        this.showLoginTip = false;
      }, 2000);
    },
    handleLogin() {
      if (!this.phone || !this.password) {
        this.showLoginTipMsg('请输入账号和密码');
        return;
      }
      // 校验手机号格式
      const phoneReg = /^1[3-9]\d{9}$/;
      if (!phoneReg.test(this.phone)) {
        this.phoneTouched = true;
        return;
      }
      // 检查手机号是否已注册
      const registeredPhones = JSON.parse(localStorage.getItem('registeredPhones') || '[]');
      if (!registeredPhones.includes(this.phone)) {
        this.showLoginTipMsg('账号不存在，请先注册');
        return;
      }
      this.accountNotExist = false;
      // 验证密码 - 先检查是否有修改过的密码，如果没有则使用默认密码
      const userPasswords = JSON.parse(localStorage.getItem('userPasswords') || '{}');
      const correctPassword = userPasswords[this.phone] || '123456a';
      if (this.password !== correctPassword) {
        this.showLoginTipMsg('密码错误，请重新输入');
        return;
      }
      this.loginError = false;
      this.loginSuccess = true;
      this.successMsg = "登录成功！";
      
      // 使用全局认证服务保存登录状态
      this.auth.login(this.phone);
      
      // 跳转到主页
      setTimeout(() => {
        this.$router.push('/');
      }, 1000);
    },
    showDeleteAccountDialog() {
      this.showDeleteDialog = true;
      this.deletePhone = '';
      this.deletePassword = '';
      this.deletePhoneTouched = false;
      this.deletePasswordTouched = false;
    },
    hideDeleteDialog() {
      this.showDeleteDialog = false;
      this.deletePhone = '';
      this.deletePassword = '';
      this.deletePhoneTouched = false;
      this.deletePasswordTouched = false;
    },
    confirmDeleteAccount() {
      if (!this.canDeleteAccount) {
        return;
      }
      
      // 删除用户数据
      const registeredPhones = JSON.parse(localStorage.getItem('registeredPhones') || '[]');
      const userPasswords = JSON.parse(localStorage.getItem('userPasswords') || '{}');
      
      // 从已注册手机号列表中移除
      const phoneIndex = registeredPhones.indexOf(this.deletePhone);
      if (phoneIndex > -1) {
        registeredPhones.splice(phoneIndex, 1);
        localStorage.setItem('registeredPhones', JSON.stringify(registeredPhones));
      }
      
      // 删除用户密码
      delete userPasswords[this.deletePhone];
      localStorage.setItem('userPasswords', JSON.stringify(userPasswords));
      
      // 如果注销的账号正是当前登录页面显示的账号，则清空输入框
      if (this.phone === this.deletePhone) {
        this.phone = '';
        this.password = '';
        this.phoneTouched = false;
        this.passwordTouched = false;
        this.accountNotExist = false;
        this.loginError = false;
      }
      
      // 显示成功消息并关闭对话框
      this.deleteSuccess = true;
      this.deleteSuccessMsg = '账号已成功注销';
      this.hideDeleteDialog();
      
      // 3秒后隐藏成功提示
      setTimeout(() => {
        this.deleteSuccess = false;
        this.deleteSuccessMsg = '';
      }, 3000);
    },
  },
};
</script>

<style scoped>
.login-bg {
  min-height: 100vh;
  background: url('../assets/img/background.png') no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.login-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  z-index: 1;
}

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: -80px;
  margin-left: -80px;
  z-index: 2;
}
.login-left {
  background: #5a6b7f;
  color: #fff;
  border-radius: 80px;
  padding: 60px 60px 60px 60px;
  width: 900px;
  height: 380px;
  margin-right: -120px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
  position: relative;
}
.login-left-content {
  text-align: left;
}
.login-left h2 {
  font-size: 3rem;
  margin-bottom: 18px;
  font-weight: 700;
  color: #fff;
}
.login-left h1 {
  font-size: 3.2rem;
  margin-bottom: 18px;
  font-weight: 800;
  color: #fff;
}
.login-left p {
  font-size: 1.1rem;
  opacity: 0.97;
  margin-top: 12px;
  color: #fff;
}
.login-right {
  background: #d4c4a8;
  border-radius: 80px;
  padding: 60px 40px;
  width: 320px;
  height: 580px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  position: relative;
  margin-left: -380px;
}
.login-right h2 {
  font-size: 2.6rem;
  margin-bottom: 36px;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 800;
  text-align: center;
}
form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
input[type="text"], input[type="password"] {
  width: 100%;
  padding: 16px 18px;
  margin-bottom: 18px;
  border: none;
  border-radius: 12px;
  font-size: 1.08rem;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}
.password-box {
  position: relative;
  width: 100%;
}
.password-box .toggle {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.1rem;
}
.agreement {
  font-size: 0.98rem;
  color: #888;
  margin-bottom: 18px;
  width: 100%;
  text-align: left;
}
.agreement a {
  color: #4a7eb3;
  text-decoration: none;
  margin: 0 2px;
}
button[type="submit"] {
  width: 100%;
  padding: 15px 0;
  background: #7b90a7;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 18px;
  transition: background 0.2s;
}
button[type="submit"]:hover {
  background: #264477;
}
.login-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 1.08rem;
  color: #888;
  margin-top: 18px;
}
.login-footer a {
  color: #2b649e;
  text-decoration: none;
}
@media (max-width: 1100px) {
  .login-container {
    flex-direction: column;
  }
  .login-left, .login-right {
    width: 95vw !important;
    min-width: unset;
    margin: 0 auto 24px auto;
    left: unset !important;
    top: unset !important;
    height: auto !important;
    border-radius: 32px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  }
  .login-bg {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: unset;
    min-height: unset;
    height: auto;
  }
}
.success-tip {
  color: #2ecc40;
  background: #eafbe7;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
  font-size: 1.1rem;
  text-align: center;
}
.error-tip {
  color: #e74c3c;
  background: #fbeaea;
  border-radius: 6px;
  padding: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1rem;
  text-align: center;
}
.login-tip-no-bg {
  background: none !important;
  border: none !important;
  color: #000 !important;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.delete-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.delete-dialog {
  background: white;
  border-radius: 8px;
  padding: 20px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.delete-dialog h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #e74c3c;
  text-align: center;
}

.delete-dialog p {
  margin-bottom: 20px;
  color: #666;
  text-align: center;
  font-size: 0.9rem;
}

.delete-dialog input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
}

.delete-dialog input:focus {
  outline: none;
  border-color: #7b90a7;
}

.dialog-buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}

.dialog-buttons button {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
}

.cancel-btn {
  background: #f1f1f1;
  color: #333;
}

.confirm-btn {
  background: #e74c3c;
  color: white;
}

.confirm-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 针对账号不正确提示单独样式 */
input[type="text"]:not(:focus):not(:placeholder-shown) + .error-tip {
  background: none !important;
  color: #000 !important;
}

/* 只影响账号不正确提示 */
.error-tip.account-error {
  background: none !important;
  color: #000 !important;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-input-password-toggle-button,
input[type="password"]::-webkit-input-password-toggle {
  display: none !important;
}

.eye-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.eye-icon:hover {
  opacity: 0.7;
}
</style>
